<template>
  <el-drawer
    v-model="table"
    :title="proarr.title + '   的答卷'"
    direction="rtl"
    size="50%"
    :before-close="handleClose"
  >
    <div class="text">
      <div class="textTop">
        <div class="textHeader_1">
          <div>
            得分:<span class="scores">{{ proarr.studentScores }} </span>
          </div>
          <div>
            总分:<span class="scores">{{ proarr.scores }}</span>
          </div>
          <div>
            通过分数:<span class="scores">{{ proarr.pastscores }}</span>
          </div>
          <div>考试用时:<span class="scores"></span></div>
          <div>
            交卷时间:<span class="scores">{{ proarr.stuEndTime }}</span>
          </div>
        </div>
        <div class="textHeader_2">
          <div class="scores">{{ proarr.textScores }}</div>
          <div class="addtime">{{ proarr.textAddtime }}</div>
        </div>
      </div>
      <div class="questionBox">
        <div
          class="li"
          v-for="(item, index) in proarr.questions"
          :id="'id' + index"
          :key="item.id"
        >
          <div class="questionType">
            <div class="type">
              <div class="num">{{ index + 1 }}</div>
              <div class="typeTitle">{{ item.type }}</div>
            </div>
            <span class="score">分值：{{ item.scores }}</span>
            <!-- 得分'getScore'   非0 'getScore have' -->
            <div
              :class="item.studentscores > 0 ? 'getScore have' : 'getScore '"
            >
              得分：{{ item.studentscores }}
            </div>
          </div>
          <span class="title" v-html="rep(item.title)"></span>
          <!-- 单选多选 -->
          <div
            class="optionsList"
            v-show="
              item.type === '单选题' ||
              item.type === '多选题' ||
              item.type === '判断题'
            "
          >
            <!-- 回答正确  correct  optionsLi
                     回答错误  wrong  optionsLi     默认optionsLi -->
            <!-- 单选 -->
            <div
              v-show="item.type === '单选题'"
              :class="
                item.answer === itemOpt.answerno
                  ? item.studentanswer === itemOpt.answerno
                    ? 'optionsLi correct'
                    : 'optionsLi'
                  : item.studentanswer === itemOpt.answerno
                  ? 'optionsLi wrong'
                  : 'optionsLi'
              "
              v-for="itemOpt in item.answers"
              :key="itemOpt.id"
            >
              <div class="left">
                <div class="opt">{{ itemOpt.answerno }}</div>
                <span>{{ itemOpt.content }}</span>
              </div>
              <div class="right" v-show="item.studentanswer === item.answer">
                回答正确
              </div>
              <div class="right" v-show="item.studentanswer !== item.answer">
                回答错误
              </div>
            </div>
            <!-- 多选 -->
            <div
              :class="
                item.answer.includes(itemOpt.answerno)
                  ? item.studentanswer.includes(itemOpt.answerno)
                    ? 'optionsLi correct'
                    : 'optionsLi'
                  : item.studentanswer.includes(itemOpt.answerno)
                  ? 'optionsLi wrong'
                  : 'optionsLi'
              "
              v-show="item.type === '多选题'"
              v-for="itemOpt in item.answers"
              :key="itemOpt.id"
            >
              <div class="left">
                <div class="opt">{{ itemOpt.answerno }}</div>
                <span>{{ itemOpt.content }}</span>
              </div>
              <div
                class="right"
                v-show="
                  item.studentanswer.includes(itemOpt.answerno) &&
                  item.answer.includes(itemOpt.answerno)
                "
              >
                回答正确
              </div>
              <div
                class="right"
                v-show="
                  !(
                    item.studentanswer.includes(itemOpt.answerno) &&
                    item.answer.includes(itemOpt.answerno)
                  )
                "
              >
                回答错误
              </div>
            </div>
            <!-- 判断题 -->
            <div
              :class="
                item.answer === '正确'
                  ? item.studentanswer === '错误'
                    ? 'optionsLi'
                    : 'optionsLi correct'
                  : item.studentanswer === '正确'
                  ? 'optionsLi wrong'
                  : 'optionsLi'
              "
              v-show="item.type === '判断题'"
            >
              <div class="left">
                <div class="opt"></div>
                <span>正确</span>
              </div>
              <div class="right" v-show="item.studentanswer === item.answer">
                回答正确
              </div>
              <div class="right" v-show="item.studentanswer !== item.answer">
                回答错误
              </div>
            </div>
            <div
              :class="
                item.answer === '错误'
                  ? item.studentanswer === '正确'
                    ? 'optionsLi'
                    : 'optionsLi correct'
                  : item.studentanswer === '错误'
                  ? 'optionsLi wrong'
                  : 'optionsLi'
              "
              v-show="item.type === '判断题'"
            >
              <div class="left">
                <div class="opt"></div>
                <span>错误</span>
              </div>
              <div class="right" v-show="item.studentanswer === item.answer">
                回答正确
              </div>
              <div class="right" v-show="item.studentanswer !== item.answer">
                回答错误
              </div>
            </div>
          </div>
          <!-- 正确答案： -->
          <div
            class="answer"
            v-show="
              item.type === '单选题' ||
              item.type === '多选题' ||
              item.type === '判断题'
            "
          >
            <span>正确答案：</span>
            <div v-show="item.type === '单选题'">{{ item.answer }}</div>
            <span
              style="margin-left: 10px; color: #666"
              v-show="item.type === '判断题'"
              >{{ item.answer }}</span
            >
            <div
              v-if="item.type === '多选题'"
              v-for="itemAnswer in item.answer.split('|')"
              :key="itemAnswer.id"
            >
              {{ itemAnswer }}
            </div>
          </div>
          <!-- 问答题 -->
          <div
            class="saq"
            v-show="item.type === '填空题' || item.type === '问答题'"
          >
            <div class="ans">答:</div>
            <div class="answer">{{ item.studentanswer }}</div>
            <!-- 填空题存在 -->
            <div class="answer correct">正确答案</div>
            <div class="parse">
              <span>答案解析</span>
              <div>{{ item.explains }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </el-drawer>
</template>
<script lang="ts" setup>
import { reactive, ref, watchEffect, toRefs, inject } from "vue";
import { ElDrawer, ElMessageBox } from "element-plus";
import { getForResult } from "../../apis/test/test";
const form: any = reactive({
  name: "",
  region: "",
  date1: "",
  date2: "",
  delivery: false,
  type: [],
  resource: "",
  desc: "",
  proarr: {},
  table:false
});
const { table,proarr } = toRefs(form);
const props = defineProps({
  table: Boolean,
  testids: String,
  studentId: String,
});

// 给父组件传值
const Dialog = defineEmits(["updaDialog"]);
const handleClose = () => {
  Dialog("updaDialog", false);
};
// 监听
watchEffect(() => {
  table.value = props.table;
  const testid = props.testids;
  const studentId = props.studentId;
  if (studentId) {
    getForResults(studentId, testid);
  }
});
// 替换方法
const rep = (str: string) => {
  return str.replace(
    /\[\]/g,
    `_____,`
  );
};
// 请求数据
const getForResults = async (studentId: any, testid: any) => {
  const res: any = await getForResult({ testid: testid, studentid: studentId });
  if (res.errCode == 10000) {
    proarr.value = res.data;
    console.log(proarr.value);
    
  }
};
</script>
<style lang = "less" scoped>
@import url("../../static/css/test/Examine.css");
</style>